<template>
  <div @back="() => $router.go(-1)">
    <a-card>
      <div class="feedback-detail">
        <a-descriptions :title="$t('all.autotext15')"></a-descriptions>
        <div class="feedback-detail__user">
          <table class="table">
            <tr>
              <td>{{ $t('all.autotext1113') }}</td><td>{{ details.userNo | formatNull('--') }}</td>
              <td>{{ $t('all.autotext551') }}</td><td>{{ details.account | formatNull('--') }}</td>
              <td>{{ $t('all.autotext977') }}</td><td>{{ details.name | formatNull('--') }}</td>
            </tr>
            <tr>
              <td>{{ $t('all.autotext709') }}</td><td>{{ details.phone | formatNull('--') }}</td>
              <td>{{ $t('all.autotext44') }}</td><td>{{ details.email | formatNull('--') }}</td>
              <td></td><td></td>
            </tr>
          </table>
        </div>
        <a-descriptions :title="$t('all.autotext320')" style="margin-top: 24px"></a-descriptions>
        <div class="feedback-detail__content">
          <div class="item">
            <span class="label">{{ $t('all.autotext540') }}</span>
            <span class="content">{{ details.createTime | formatNull('--') }}</span>
          </div>
          <div class="item">
            <span class="label">{{ $t('all.autotext320') }}</span>
            <span class="content">{{ details.content }}</span>
          </div>
        </div>
        <div class="feedback-detail__footer">
          <a-button type="primary" @click="$router.go(-1)">{{ $t('all.autotext76') }}</a-button>
        </div>
      </div>
    </a-card>
  </div>
</template>

<script>
import { apiGetFeedbackDetailsById } from '@api/feedback/feedback'
import moment from 'moment'
export default {
  name: 'feedback-detail',
  props: {
    id: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      details: {}
    }
  },
  created () {
    this.getDetails()
  },
  methods: {
    getDetails () {
      apiGetFeedbackDetailsById({ id: this.id }).then(res => {
        if (res.createTime) {
          const formatCreateTime = (time) => moment(time).format('YYYY-MM-DD HH:mm:ss')
          res.createTime = formatCreateTime(res.createTime)
        }
        this.details = res
      })
    }
  }
}
</script>

<style scoped lang='less'>
.feedback-detail {
  .feedback-detail__user {
    .table {
      width: 100%;
      tr {
        td {
          border: 1px solid #E5EBF3;
          padding: 16px ;
          &:nth-of-type(odd) {
            background-color: rgba(241, 245, 248, 0.6);
          }
        }
      }
    }
  }
  .feedback-detail__content {
    .label {
      display: inline-block;
      flex: 0 0 80px;
    }
    .item {
      display: flex;
      &:first-of-type {
        margin-bottom: 24px;
      }
      .content {
        color: #A5AFBD;
      }
    }
  }
  .feedback-detail__footer {
    padding: 48px 24px 24px;
    text-align: center;
  }
}

</style>
